<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1311177" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon hrfont">&#xe605;</span>
                <div class="name">对勾</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe60e;</span>
                <div class="name">加号2</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe611;</span>
                <div class="name">垃圾箱</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe61a;</span>
                <div class="name">右向</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe61e;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe630;</span>
                <div class="name">更多信息</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe63b;</span>
                <div class="name">感叹号</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe64a;</span>
                <div class="name">完成</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe64d;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe659;</span>
                <div class="name">恢复</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe677;</span>
                <div class="name">预览</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe679;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe639;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe62f;</span>
                <div class="name">别针</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe729;</span>
                <div class="name">编辑 02</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe754;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a1;</span>
                <div class="name">横向平分</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a2;</span>
                <div class="name">纵向平分</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe768;</span>
                <div class="name">热点</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe76c;</span>
                <div class="name">箭头-左</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe76d;</span>
                <div class="name">箭头-右</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe779;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe78e;</span>
                <div class="name">Dustbin_bold</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe783;</span>
                <div class="name">Search</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe78c;</span>
                <div class="name">方框</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe790;</span>
                <div class="name">印章-审批通过</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe791;</span>
                <div class="name">印章-审批拒绝</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe792;</span>
                <div class="name">zuo</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe793;</span>
                <div class="name">shang</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe794;</span>
                <div class="name">you</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xeb96;</span>
                <div class="name">zuo</div>
                <div class="code-name">&amp;#xeb96;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xeb98;</span>
                <div class="name">up</div>
                <div class="code-name">&amp;#xeb98;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d2;</span>
                <div class="name">部门工作交接</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d3;</span>
                <div class="name">离职交接单</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d4;</span>
                <div class="name">离职申请</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d5;</span>
                <div class="name">离职icon_a</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d6;</span>
                <div class="name">离职icon_b</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d7;</span>
                <div class="name">离职icon_c</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d8;</span>
                <div class="name">离职icon_d</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6d9;</span>
                <div class="name">离职icon_e</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a0;</span>
                <div class="name">分组</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe80a;</span>
                <div class="name">+>-01</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe80b;</span>
                <div class="name">->-01</div>
                <div class="code-name">&amp;#xe80b;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a4;</span>
                <div class="name">人员-01-01</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a5;</span>
                <div class="name">审批-01</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a7;</span>
                <div class="name">发放-01</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a8;</span>
                <div class="name">申请-01</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6a9;</span>
                <div class="name">结账-01</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6aa;</span>
                <div class="name">计算-01-01-01</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe82b;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe82b;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe834;</span>
                <div class="name">清空</div>
                <div class="code-name">&amp;#xe834;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6b4;</span>
                <div class="name">工作交接审核</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6b5;</span>
                <div class="name">图片占位-01</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe6b6;</span>
                <div class="name">上传-01</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe60c;</span>
                <div class="name">组织模版1</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe60d;</span>
                <div class="name">组织模版2</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe60f;</span>
                <div class="name">组织模版3</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe610;</span>
                <div class="name">刷新-01</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe613;</span>
                <div class="name">日历-01-01-01</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe61d;</span>
                <div class="name">人均服务量-01</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe61f;</span>
                <div class="name">业务类型占比-01</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe620;</span>
                <div class="name">业务类型统计-01</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe621;</span>
                <div class="name">业务量走势分析-01</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe622;</span>
                <div class="name">业务状态统计-01</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe623;</span>
                <div class="name">用户满意度-01</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe624;</span>
                <div class="name">预算总额-01</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe625;</span>
                <div class="name">执行总额-01</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe626;</span>
                <div class="name">发布预算单位-01</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe627;</span>
                <div class="name">达成比例-01</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe628;</span>
                <div class="name">发布预算部门-01</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe629;</span>
                <div class="name">扣税-扣款汇总-01</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe62a;</span>
                <div class="name">应发-实发汇总-01</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe62b;</span>
                <div class="name">发布预算单位-01-01</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe62c;</span>
                <div class="name">预算总额-执行总额-01-01</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe62d;</span>
                <div class="name">达成比例-01-01</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe62e;</span>
                <div class="name">发布预算部门-01</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon hrfont">&#xe631;</span>
                <div class="name">创建-01</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'hrfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#hrfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.hrfont {
  font-family: "hrfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="hrfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"hrfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon hrfont hr-check-mark"></span>
            <div class="name">
              对勾
            </div>
            <div class="code-name">.hr-check-mark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-plus02"></span>
            <div class="name">
              加号2
            </div>
            <div class="code-name">.hr-plus02
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-dustbin"></span>
            <div class="name">
              垃圾箱
            </div>
            <div class="code-name">.hr-dustbin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-right"></span>
            <div class="name">
              右向
            </div>
            <div class="code-name">.hr-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-refresh"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.hr-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-bubble"></span>
            <div class="name">
              更多信息
            </div>
            <div class="code-name">.hr-bubble
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-exclamation"></span>
            <div class="name">
              感叹号
            </div>
            <div class="code-name">.hr-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-complete"></span>
            <div class="name">
              完成
            </div>
            <div class="code-name">.hr-complete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-information"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.hr-information
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-recovery"></span>
            <div class="name">
              恢复
            </div>
            <div class="code-name">.hr-recovery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-preview"></span>
            <div class="name">
              预览
            </div>
            <div class="code-name">.hr-preview
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-close04"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.hr-close04
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-drop-down02"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.hr-drop-down02
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-icon-test"></span>
            <div class="name">
              别针
            </div>
            <div class="code-name">.hr-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-edit2"></span>
            <div class="name">
              编辑 02
            </div>
            <div class="code-name">.hr-edit2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-Arrow1"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.hr-Arrow1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-hengxiangpingfen"></span>
            <div class="name">
              横向平分
            </div>
            <div class="code-name">.hr-hengxiangpingfen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-zongxiangpingfen"></span>
            <div class="name">
              纵向平分
            </div>
            <div class="code-name">.hr-zongxiangpingfen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fire"></span>
            <div class="name">
              热点
            </div>
            <div class="code-name">.hr-fire
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-left1"></span>
            <div class="name">
              箭头-左
            </div>
            <div class="code-name">.hr-left1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-right11"></span>
            <div class="name">
              箭头-右
            </div>
            <div class="code-name">.hr-right11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-up"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.hr-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-Dustbin_bold"></span>
            <div class="name">
              Dustbin_bold
            </div>
            <div class="code-name">.hr-Dustbin_bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-Search_bold"></span>
            <div class="name">
              Search
            </div>
            <div class="code-name">.hr-Search_bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-Rectangle"></span>
            <div class="name">
              方框
            </div>
            <div class="code-name">.hr-Rectangle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yinzhang-shenpitongguo"></span>
            <div class="name">
              印章-审批通过
            </div>
            <div class="code-name">.hr-yinzhang-shenpitongguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yinzhang-shenpijujue"></span>
            <div class="name">
              印章-审批拒绝
            </div>
            <div class="code-name">.hr-yinzhang-shenpijujue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-zuo"></span>
            <div class="name">
              zuo
            </div>
            <div class="code-name">.hr-zuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-shang"></span>
            <div class="name">
              shang
            </div>
            <div class="code-name">.hr-shang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-you"></span>
            <div class="name">
              you
            </div>
            <div class="code-name">.hr-you
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fanhui"></span>
            <div class="name">
              zuo
            </div>
            <div class="code-name">.hr-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-left"></span>
            <div class="name">
              up
            </div>
            <div class="code-name">.hr-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-bumengongzuojiaojie"></span>
            <div class="name">
              部门工作交接
            </div>
            <div class="code-name">.hr-bumengongzuojiaojie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-lizhijiaojiedan"></span>
            <div class="name">
              离职交接单
            </div>
            <div class="code-name">.hr-lizhijiaojiedan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-lizhishenqing"></span>
            <div class="name">
              离职申请
            </div>
            <div class="code-name">.hr-lizhishenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-lizhiicon_a"></span>
            <div class="name">
              离职icon_a
            </div>
            <div class="code-name">.hr-lizhiicon_a
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-lizhiicon_b"></span>
            <div class="name">
              离职icon_b
            </div>
            <div class="code-name">.hr-lizhiicon_b
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-lizhiicon_c"></span>
            <div class="name">
              离职icon_c
            </div>
            <div class="code-name">.hr-lizhiicon_c
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-lizhiicon_d"></span>
            <div class="name">
              离职icon_d
            </div>
            <div class="code-name">.hr-lizhiicon_d
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-lizhiicon_e"></span>
            <div class="name">
              离职icon_e
            </div>
            <div class="code-name">.hr-lizhiicon_e
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fenzu"></span>
            <div class="name">
              分组
            </div>
            <div class="code-name">.hr-fenzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr--"></span>
            <div class="name">
              +>-01
            </div>
            <div class="code-name">.hr--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr---"></span>
            <div class="name">
              ->-01
            </div>
            <div class="code-name">.hr---
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-renyuan--"></span>
            <div class="name">
              人员-01-01
            </div>
            <div class="code-name">.hr-renyuan--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-shenpi-"></span>
            <div class="name">
              审批-01
            </div>
            <div class="code-name">.hr-shenpi-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fafang-"></span>
            <div class="name">
              发放-01
            </div>
            <div class="code-name">.hr-fafang-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-shenqing-"></span>
            <div class="name">
              申请-01
            </div>
            <div class="code-name">.hr-shenqing-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-jiezhang-"></span>
            <div class="name">
              结账-01
            </div>
            <div class="code-name">.hr-jiezhang-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-jisuan---"></span>
            <div class="name">
              计算-01-01-01
            </div>
            <div class="code-name">.hr-jisuan---
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-phone1"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.hr-phone1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-qingkong"></span>
            <div class="name">
              清空
            </div>
            <div class="code-name">.hr-qingkong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-gongzuojiaojieshenhe"></span>
            <div class="name">
              工作交接审核
            </div>
            <div class="code-name">.hr-gongzuojiaojieshenhe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-tupianzhanwei-"></span>
            <div class="name">
              图片占位-01
            </div>
            <div class="code-name">.hr-tupianzhanwei-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-shangchuan-"></span>
            <div class="name">
              上传-01
            </div>
            <div class="code-name">.hr-shangchuan-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-zuzhimoban"></span>
            <div class="name">
              组织模版1
            </div>
            <div class="code-name">.hr-zuzhimoban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-zuzhimoban1"></span>
            <div class="name">
              组织模版2
            </div>
            <div class="code-name">.hr-zuzhimoban1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-zuzhimoban2"></span>
            <div class="name">
              组织模版3
            </div>
            <div class="code-name">.hr-zuzhimoban2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-shuaxin-"></span>
            <div class="name">
              刷新-01
            </div>
            <div class="code-name">.hr-shuaxin-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-rili---"></span>
            <div class="name">
              日历-01-01-01
            </div>
            <div class="code-name">.hr-rili---
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-renjunfuwuliang-"></span>
            <div class="name">
              人均服务量-01
            </div>
            <div class="code-name">.hr-renjunfuwuliang-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yewuleixingzhanbi-"></span>
            <div class="name">
              业务类型占比-01
            </div>
            <div class="code-name">.hr-yewuleixingzhanbi-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yewuleixingtongji-"></span>
            <div class="name">
              业务类型统计-01
            </div>
            <div class="code-name">.hr-yewuleixingtongji-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yewuliangzoushifenxi-"></span>
            <div class="name">
              业务量走势分析-01
            </div>
            <div class="code-name">.hr-yewuliangzoushifenxi-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yewuzhuangtaitongji-"></span>
            <div class="name">
              业务状态统计-01
            </div>
            <div class="code-name">.hr-yewuzhuangtaitongji-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yonghumanyidu-"></span>
            <div class="name">
              用户满意度-01
            </div>
            <div class="code-name">.hr-yonghumanyidu-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yusuanzonge-"></span>
            <div class="name">
              预算总额-01
            </div>
            <div class="code-name">.hr-yusuanzonge-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-zhihangzonge-"></span>
            <div class="name">
              执行总额-01
            </div>
            <div class="code-name">.hr-zhihangzonge-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fabuyusuandanwei-"></span>
            <div class="name">
              发布预算单位-01
            </div>
            <div class="code-name">.hr-fabuyusuandanwei-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-dachengbili-"></span>
            <div class="name">
              达成比例-01
            </div>
            <div class="code-name">.hr-dachengbili-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fabuyusuanbumen-"></span>
            <div class="name">
              发布预算部门-01
            </div>
            <div class="code-name">.hr-fabuyusuanbumen-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-koushui-koukuanhuizong-"></span>
            <div class="name">
              扣税-扣款汇总-01
            </div>
            <div class="code-name">.hr-koushui-koukuanhuizong-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yingfa-shifahuizong-"></span>
            <div class="name">
              应发-实发汇总-01
            </div>
            <div class="code-name">.hr-yingfa-shifahuizong-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fabuyusuandanwei--"></span>
            <div class="name">
              发布预算单位-01-01
            </div>
            <div class="code-name">.hr-fabuyusuandanwei--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-yusuanzonge-zhihangzonge--"></span>
            <div class="name">
              预算总额-执行总额-01-01
            </div>
            <div class="code-name">.hr-yusuanzonge-zhihangzonge--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-dachengbili--"></span>
            <div class="name">
              达成比例-01-01
            </div>
            <div class="code-name">.hr-dachengbili--
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-fabuyusuanbumen-1"></span>
            <div class="name">
              发布预算部门-01
            </div>
            <div class="code-name">.hr-fabuyusuanbumen-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon hrfont hr-chuangjian-"></span>
            <div class="name">
              创建-01
            </div>
            <div class="code-name">.hr-chuangjian-
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="hrfont hr-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            hrfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-check-mark"></use>
                </svg>
                <div class="name">对勾</div>
                <div class="code-name">#hr-check-mark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-plus02"></use>
                </svg>
                <div class="name">加号2</div>
                <div class="code-name">#hr-plus02</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-dustbin"></use>
                </svg>
                <div class="name">垃圾箱</div>
                <div class="code-name">#hr-dustbin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-right"></use>
                </svg>
                <div class="name">右向</div>
                <div class="code-name">#hr-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-refresh"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#hr-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-bubble"></use>
                </svg>
                <div class="name">更多信息</div>
                <div class="code-name">#hr-bubble</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-exclamation"></use>
                </svg>
                <div class="name">感叹号</div>
                <div class="code-name">#hr-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-complete"></use>
                </svg>
                <div class="name">完成</div>
                <div class="code-name">#hr-complete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-information"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#hr-information</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-recovery"></use>
                </svg>
                <div class="name">恢复</div>
                <div class="code-name">#hr-recovery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-preview"></use>
                </svg>
                <div class="name">预览</div>
                <div class="code-name">#hr-preview</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-close04"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#hr-close04</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-drop-down02"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#hr-drop-down02</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-icon-test"></use>
                </svg>
                <div class="name">别针</div>
                <div class="code-name">#hr-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-edit2"></use>
                </svg>
                <div class="name">编辑 02</div>
                <div class="code-name">#hr-edit2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-Arrow1"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#hr-Arrow1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-hengxiangpingfen"></use>
                </svg>
                <div class="name">横向平分</div>
                <div class="code-name">#hr-hengxiangpingfen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-zongxiangpingfen"></use>
                </svg>
                <div class="name">纵向平分</div>
                <div class="code-name">#hr-zongxiangpingfen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fire"></use>
                </svg>
                <div class="name">热点</div>
                <div class="code-name">#hr-fire</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-left1"></use>
                </svg>
                <div class="name">箭头-左</div>
                <div class="code-name">#hr-left1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-right11"></use>
                </svg>
                <div class="name">箭头-右</div>
                <div class="code-name">#hr-right11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-up"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#hr-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-Dustbin_bold"></use>
                </svg>
                <div class="name">Dustbin_bold</div>
                <div class="code-name">#hr-Dustbin_bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-Search_bold"></use>
                </svg>
                <div class="name">Search</div>
                <div class="code-name">#hr-Search_bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-Rectangle"></use>
                </svg>
                <div class="name">方框</div>
                <div class="code-name">#hr-Rectangle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yinzhang-shenpitongguo"></use>
                </svg>
                <div class="name">印章-审批通过</div>
                <div class="code-name">#hr-yinzhang-shenpitongguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yinzhang-shenpijujue"></use>
                </svg>
                <div class="name">印章-审批拒绝</div>
                <div class="code-name">#hr-yinzhang-shenpijujue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-zuo"></use>
                </svg>
                <div class="name">zuo</div>
                <div class="code-name">#hr-zuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-shang"></use>
                </svg>
                <div class="name">shang</div>
                <div class="code-name">#hr-shang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-you"></use>
                </svg>
                <div class="name">you</div>
                <div class="code-name">#hr-you</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fanhui"></use>
                </svg>
                <div class="name">zuo</div>
                <div class="code-name">#hr-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-left"></use>
                </svg>
                <div class="name">up</div>
                <div class="code-name">#hr-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-bumengongzuojiaojie"></use>
                </svg>
                <div class="name">部门工作交接</div>
                <div class="code-name">#hr-bumengongzuojiaojie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-lizhijiaojiedan"></use>
                </svg>
                <div class="name">离职交接单</div>
                <div class="code-name">#hr-lizhijiaojiedan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-lizhishenqing"></use>
                </svg>
                <div class="name">离职申请</div>
                <div class="code-name">#hr-lizhishenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-lizhiicon_a"></use>
                </svg>
                <div class="name">离职icon_a</div>
                <div class="code-name">#hr-lizhiicon_a</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-lizhiicon_b"></use>
                </svg>
                <div class="name">离职icon_b</div>
                <div class="code-name">#hr-lizhiicon_b</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-lizhiicon_c"></use>
                </svg>
                <div class="name">离职icon_c</div>
                <div class="code-name">#hr-lizhiicon_c</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-lizhiicon_d"></use>
                </svg>
                <div class="name">离职icon_d</div>
                <div class="code-name">#hr-lizhiicon_d</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-lizhiicon_e"></use>
                </svg>
                <div class="name">离职icon_e</div>
                <div class="code-name">#hr-lizhiicon_e</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fenzu"></use>
                </svg>
                <div class="name">分组</div>
                <div class="code-name">#hr-fenzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr--"></use>
                </svg>
                <div class="name">+>-01</div>
                <div class="code-name">#hr--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr---"></use>
                </svg>
                <div class="name">->-01</div>
                <div class="code-name">#hr---</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-renyuan--"></use>
                </svg>
                <div class="name">人员-01-01</div>
                <div class="code-name">#hr-renyuan--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-shenpi-"></use>
                </svg>
                <div class="name">审批-01</div>
                <div class="code-name">#hr-shenpi-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fafang-"></use>
                </svg>
                <div class="name">发放-01</div>
                <div class="code-name">#hr-fafang-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-shenqing-"></use>
                </svg>
                <div class="name">申请-01</div>
                <div class="code-name">#hr-shenqing-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-jiezhang-"></use>
                </svg>
                <div class="name">结账-01</div>
                <div class="code-name">#hr-jiezhang-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-jisuan---"></use>
                </svg>
                <div class="name">计算-01-01-01</div>
                <div class="code-name">#hr-jisuan---</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-phone1"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#hr-phone1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-qingkong"></use>
                </svg>
                <div class="name">清空</div>
                <div class="code-name">#hr-qingkong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-gongzuojiaojieshenhe"></use>
                </svg>
                <div class="name">工作交接审核</div>
                <div class="code-name">#hr-gongzuojiaojieshenhe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-tupianzhanwei-"></use>
                </svg>
                <div class="name">图片占位-01</div>
                <div class="code-name">#hr-tupianzhanwei-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-shangchuan-"></use>
                </svg>
                <div class="name">上传-01</div>
                <div class="code-name">#hr-shangchuan-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-zuzhimoban"></use>
                </svg>
                <div class="name">组织模版1</div>
                <div class="code-name">#hr-zuzhimoban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-zuzhimoban1"></use>
                </svg>
                <div class="name">组织模版2</div>
                <div class="code-name">#hr-zuzhimoban1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-zuzhimoban2"></use>
                </svg>
                <div class="name">组织模版3</div>
                <div class="code-name">#hr-zuzhimoban2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-shuaxin-"></use>
                </svg>
                <div class="name">刷新-01</div>
                <div class="code-name">#hr-shuaxin-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-rili---"></use>
                </svg>
                <div class="name">日历-01-01-01</div>
                <div class="code-name">#hr-rili---</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-renjunfuwuliang-"></use>
                </svg>
                <div class="name">人均服务量-01</div>
                <div class="code-name">#hr-renjunfuwuliang-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yewuleixingzhanbi-"></use>
                </svg>
                <div class="name">业务类型占比-01</div>
                <div class="code-name">#hr-yewuleixingzhanbi-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yewuleixingtongji-"></use>
                </svg>
                <div class="name">业务类型统计-01</div>
                <div class="code-name">#hr-yewuleixingtongji-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yewuliangzoushifenxi-"></use>
                </svg>
                <div class="name">业务量走势分析-01</div>
                <div class="code-name">#hr-yewuliangzoushifenxi-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yewuzhuangtaitongji-"></use>
                </svg>
                <div class="name">业务状态统计-01</div>
                <div class="code-name">#hr-yewuzhuangtaitongji-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yonghumanyidu-"></use>
                </svg>
                <div class="name">用户满意度-01</div>
                <div class="code-name">#hr-yonghumanyidu-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yusuanzonge-"></use>
                </svg>
                <div class="name">预算总额-01</div>
                <div class="code-name">#hr-yusuanzonge-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-zhihangzonge-"></use>
                </svg>
                <div class="name">执行总额-01</div>
                <div class="code-name">#hr-zhihangzonge-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fabuyusuandanwei-"></use>
                </svg>
                <div class="name">发布预算单位-01</div>
                <div class="code-name">#hr-fabuyusuandanwei-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-dachengbili-"></use>
                </svg>
                <div class="name">达成比例-01</div>
                <div class="code-name">#hr-dachengbili-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fabuyusuanbumen-"></use>
                </svg>
                <div class="name">发布预算部门-01</div>
                <div class="code-name">#hr-fabuyusuanbumen-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-koushui-koukuanhuizong-"></use>
                </svg>
                <div class="name">扣税-扣款汇总-01</div>
                <div class="code-name">#hr-koushui-koukuanhuizong-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yingfa-shifahuizong-"></use>
                </svg>
                <div class="name">应发-实发汇总-01</div>
                <div class="code-name">#hr-yingfa-shifahuizong-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fabuyusuandanwei--"></use>
                </svg>
                <div class="name">发布预算单位-01-01</div>
                <div class="code-name">#hr-fabuyusuandanwei--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-yusuanzonge-zhihangzonge--"></use>
                </svg>
                <div class="name">预算总额-执行总额-01-01</div>
                <div class="code-name">#hr-yusuanzonge-zhihangzonge--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-dachengbili--"></use>
                </svg>
                <div class="name">达成比例-01-01</div>
                <div class="code-name">#hr-dachengbili--</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-fabuyusuanbumen-1"></use>
                </svg>
                <div class="name">发布预算部门-01</div>
                <div class="code-name">#hr-fabuyusuanbumen-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#hr-chuangjian-"></use>
                </svg>
                <div class="name">创建-01</div>
                <div class="code-name">#hr-chuangjian-</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
